<template>
  <div class="profile-layout">
    <!-- 左侧信息展示 -->
    <el-card class="info-card">
      <div class="avatar-container">
        <el-avatar :size="80" :src="userInfo.avatar">
          <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        </el-avatar>
      </div>
      <div class="info-list">
        <h3>个人信息</h3>
        <div class="info-item">
          <span class="label">用户名：</span>
          <span class="value">{{ userInfo.username }}</span>
        </div>
        <div class="info-item">
          <span class="label">姓名：</span>
          <span class="value">{{ userInfo.realName }}</span>
        </div>
        <div class="info-item">
          <span class="label">邮箱：</span>
          <span class="value">{{ userInfo.email }}</span>
        </div>
        <div class="info-item">
          <span class="label">手机号：</span>
          <span class="value">{{ userInfo.phone }}</span>
        </div>
        <div class="info-item">
          <span class="label">部门：</span>
          <span class="value">{{ userInfo.department }}</span>
        </div>
        <div class="info-item">
          <span class="label">职位：</span>
          <span class="value">{{ userInfo.position }}</span>
        </div>
        <div class="info-item">
          <span class="label">注册时间：</span>
          <span class="value">{{ userInfo.createTime }}</span>
        </div>
        <div class="info-item">
          <span class="label">最近登录：</span>
          <span class="value">{{ userInfo.lastLoginTime }}</span>
        </div>
      </div>
    </el-card>

    <!-- 右侧编辑表单 -->
    <el-card class="form-card">
      <h3>编辑个人信息</h3>
      <el-form
          ref="formRef"
          :model="userInfo"
          :rules="rules"
          label-width="100px"
          class="form"
      >
        <el-form-item label="头像" prop="avatar">
          <el-upload
              class="avatar-uploader"
              action="/api/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>

        <el-form-item label="用户名" prop="username">
          <el-input v-model="userInfo.username" disabled />
        </el-form-item>

        <el-form-item label="姓名" prop="realName">
          <el-input v-model="userInfo.realName" />
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userInfo.email" />
        </el-form-item>

        <el-form-item label="手机号" prop="phone">
          <el-input v-model="userInfo.phone" />
        </el-form-item>

        <el-form-item label="部门" prop="department">
          <el-input v-model="userInfo.department" disabled />
        </el-form-item>

        <el-form-item label="职位" prop="position">
          <el-input v-model="userInfo.position" disabled />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)">保存修改</el-button>
          <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const formRef = ref<FormInstance>()

// 用户信息对象
const userInfo = reactive({
  id: '',
  username: '',
  realName: '',
  email: '',
  phone: '',
  avatar: '',
  department: '',
  position: '',
  password: '',
  confirmPassword: '',
  createTime: '',
  lastLoginTime: ''
})

// 表单校验规则
const rules = reactive<FormRules>({
  realName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  confirmPassword: [
    {
      validator: (rule, value, callback) => {
        if (userInfo.password && value !== userInfo.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

// 获取用户信息
const getUserInfo = () => {
  // 模拟从API获取用户信息
  // 实际使用时，替换为真实的API调用
  setTimeout(() => {
    Object.assign(userInfo, {
      id: '1001',
      username: 'admin',
      realName: '管理员',
      email: 'admin@example.com',
      phone: '13800138000',
      avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      department: '技术部',
      position: '系统管理员',
      createTime: '2023-01-01 12:00:00',
      lastLoginTime: '2023-05-30 09:30:45'
    })
  }, 500)
}

// 头像上传成功处理
const handleAvatarSuccess = (response: any) => {
  userInfo.avatar = response.data.url
  ElMessage.success('头像上传成功')
}

// 头像上传前验证
const beforeAvatarUpload = (file: File) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    ElMessage.error('上传头像图片只能是 JPG 或 PNG 格式!')
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!')
  }
  return isJPG && isLt2M
}

// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      // 模拟提交到API
      // 实际使用时，替换为真实的API调用
      setTimeout(() => {
        ElMessage.success('个人信息更新成功')
        // 清空密码字段
        userInfo.password = ''
        userInfo.confirmPassword = ''
      }, 500)
    } else {
      ElMessage.error('表单验证失败，请检查输入')
    }
  })
}

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  getUserInfo() // 重新获取用户信息
}

// 页面加载时获取用户信息
onMounted(() => {
  getUserInfo()
})
</script>

<style scoped>

.profile-layout {
  display: flex;
  align-items: flex-start;
}

.info-card {
  width: 500px;
  margin-right: 20px;
}

.form-card {
  flex: 1;
}

.avatar-container {
  text-align: center;
  margin-bottom: 15px;
}

.info-list {
  margin-top: 10px;
}

.info-item {
  display: flex;
  margin-bottom: 10px;
  line-height: 24px;
  font-size: 14px;
}

.label {
  font-weight: bold;
  color: #606266;
  width: 100px;
  flex-shrink: 0;
}

.value {
  color: #303133;
  flex: 1;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
}

.avatar-uploader:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

@media (max-width: 768px) {
  .profile-layout {
    flex-direction: column;
  }
  
  .info-card {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
}
</style> 